// Admin.js
import React, { useState, useEffect } from 'react';
import ApexCharts from 'react-apexcharts';
import Web3 from 'web3';
import { useParams, Link } from 'react-router-dom';
// import '../static/css/app.css'; // 导入 CSS 文件

import AdminABI from '../contract/ABIs/Admin.json'; // 管理员合约 ABI
import { useRef } from 'react';
import shape1 from '../static/bootstrap/images/shape1.png';
import shape2 from '../static/bootstrap/images/shape2.png';
import shape3 from '../static/bootstrap/images/shape3.png';
import shape4 from '../static/bootstrap/images/shape4.png';
import shape5 from '../static/bootstrap/images/shape5.png';
import shape6 from '../static/bootstrap/images/shape6.png';
import user3 from '../static/bootstrap/images/user3.png';
import gb from '../static/bootstrap/images/gb.svg';
import us from '../static/bootstrap/images/us.svg';
import AdminNavBar from './nav/AdminNavBar';
import Head from './nav/Head.js';


const Admin = () => {
    const [web3, setWeb3] = useState(null);
    // 使用 useParams 获取路由参数中的地址信息
    const { address } = useParams();
    const [contractAdmin, setcontractAdmin] = useState(null);
    const [isAdmin, setIsAdmin] = useState(false);
    const [nav, setNav] = useState(true);
    const chartRef3 = useRef(null);
    const chartRef4 = useRef(null);
    const chartRef5 = useRef(null);
    const chartRef6 = useRef(null);

    // 使用useState初始化背景颜色状态
    const [bgColor, setBgColor] = useState('#101316');

    // 定义一个函数来改变背景颜色
    const changeColor = () => {
        // 这里可以根据需要改变颜色，例如切换到另一个颜色
        bgColor === '#101316' ? setBgColor('#FFFFFF') : setBgColor('#101316');
    };

    const chartOptions = {
        series: [{
            name: 'Inflation',
            data: [2.3, 3.1, 4.0, 10.1, 4.0, 3.6, 3.2, 2.3, 1.4, 0.8, 0.5, 0.2]
        }],
        options: {
            chart: {
                height: 202,
                type: 'bar',
            },
            plotOptions: {
                bar: {
                    borderRadius: 10,
                    dataLabels: {
                        position: 'top',
                    },
                }
            },
            dataLabels: {
                enabled: true,
                formatter: function (val) {
                    return val + "%";
                },
                offsetY: -20,
                style: {
                    fontSize: '12px',
                    colors: ["#FBC62D"]
                }
            },

            xaxis: {
                categories: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
                position: 'top',
                axisBorder: {
                    show: false
                },
                axisTicks: {
                    show: false
                },
                crosshairs: {
                    fill: {
                        type: 'gradient',
                        gradient: {
                            colorFrom: '#1F1F1F',
                            colorTo: '#1F1F1F',
                            stops: [0, 100],
                            opacityFrom: 0.4,
                            opacityTo: 0.5,
                        }
                    }
                },
                tooltip: {
                    enabled: true,
                }
            },
            yaxis: {
                axisBorder: {
                    show: false
                },
                axisTicks: {
                    show: false,
                },
                labels: {
                    show: false,
                    formatter: function (val) {
                        return val + "%";
                    }
                }

            },
            title: {
                text: 'Monthly Inflation in Argentina, 2002',
                floating: true,
                offsetY: 330,
                align: 'center',
                style: {
                    color: '#FBC62D'
                }
            },

            tooltip: {
                enabled: true,
                style: {
                    background: '#FBC62D', // 设置背景颜色为红色
                }
            }
        },
    };
    var options = {

        series: [{
            name: 'series1',
            data: [31, 40, 28, 51, 42, 109, 100]
        }, {
            name: 'series2',
            data: [11, 32, 45, 32, 34, 52, 41]
        }],
        options: {
            chart: {
                height: 202,
                type: 'area'
            },
            dataLabels: {
                enabled: false
            },
            stroke: {
                curve: 'smooth'
            },
            xaxis: {
                type: 'datetime',
                categories: ["2018-09-19T00:00:00.000Z", "2018-09-19T01:30:00.000Z", "2018-09-19T02:30:00.000Z", "2018-09-19T03:30:00.000Z", "2018-09-19T04:30:00.000Z", "2018-09-19T05:30:00.000Z", "2018-09-19T06:30:00.000Z"]
            },
            tooltip: {
                x: {
                    format: 'dd/MM/yy HH:mm'
                },
            },
        },
    }

    useEffect(() => {
        async function init() {
            // 连接到以太坊网络
            if (window.ethereum) {
                const web3Instance = new Web3(window.ethereum);
                try {
                    // 请求用户授权
                    await window.ethereum.enable();
                    setWeb3(web3Instance);


                    // 创建管理员合约实例
                    const adminInstance = new web3Instance.eth.Contract(
                        AdminABI,
                        address
                    );
                    setcontractAdmin(adminInstance);

                    // 获取当前用户的以太坊账户地址
                    const accounts = await web3Instance.eth.getAccounts();
                    const currentAddress = accounts[0];
                    // 获取管理员合约的 owner 地址
                    const ownerAddress = await adminInstance.methods.getOwner().call();
                    // 检查当前账户是否是管理员本人
                    setIsAdmin(currentAddress === ownerAddress);
                } catch (error) {
                    console.error(error);
                }
            } else {
                console.error('请安装以太坊浏览器插件，如 MetaMask');
            }
        }
        init();
    }, [address]);
    return (
        <div>
            {!isAdmin && (<div>您没有权限访问此页面。</div>)}
            {isAdmin && (
                <div className="page-wrapper" style={{
                    backgroundColor: '#FFFFFF'

                }}>
                    <div className="main-container">
                        <AdminNavBar address={address}></AdminNavBar>

                        <div className="app-container">
                            <Head></Head>
                            <div className="app-body">
                                <div className="container-fluid">
                                    <div className="row">
                                        <div className="col-xl-6 col-12">
                                            <div className="row">
                                                <div className="col-12">
                                                    <div className="card mb-4">
                                                        <div className="card-header">
                                                            <h5 className="card-title">
                                                                Tickets
                                                            </h5>
                                                        </div>
                                                        <div className="card-body">
                                                            <ApexCharts options={chartOptions} series={chartOptions.series} type="bar" width="100%" />
                                                        </div>
                                                    </div>
                                                </div>
                                                <div className="col-6">
                                                    <div className="card mb-4">
                                                        <div className="card-header">
                                                            <h5 className="card-title">
                                                                Today's Tickets
                                                            </h5>
                                                        </div>
                                                        <div className="card-body">
                                                            <div className="d-flex justify-content-between mb-2">
                                                                <span>
                                                                    Completed
                                                                </span>
                                                                <span className="fw-bold">
                                                                    75%
                                                                </span>
                                                            </div>
                                                            <div className="progress small">
                                                                <div
                                                                    aria-valuemax="100"
                                                                    aria-valuemin="0"
                                                                    aria-valuenow="75"
                                                                    className="progress-bar bg-success"
                                                                    role="progressbar"
                                                                    style={{
                                                                        width: '75%'
                                                                    }}
                                                                />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div className="col-6">
                                                    <div className="card mb-4">
                                                        <div className="card-header">
                                                            <h5 className="card-title">
                                                                New Tickets
                                                            </h5>
                                                        </div>
                                                        <div className="card-body">
                                                            <div className="d-flex justify-content-between mb-2">
                                                                <span>
                                                                    Assigned
                                                                </span>
                                                                <span className="fw-bold">
                                                                    5
                                                                </span>
                                                            </div>
                                                            <div className="progress small">
                                                                <div
                                                                    aria-valuemax="100"
                                                                    aria-valuemin="0"
                                                                    aria-valuenow="50"
                                                                    className="progress-bar bg-danger"
                                                                    role="progressbar"
                                                                    style={{
                                                                        width: '50%'
                                                                    }}
                                                                />
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="col-xl-6 col-12">
                                            <div className="row">
                                                <div className="col-4">
                                                    <div className="card px-3 py-2 mb-4 d-flex flex-row align-items-center">
                                                        <div className="position-relative shape-block">
                                                            <img
                                                                alt="Bootstrap Themes"
                                                                className="img-fluid img-4x"
                                                                src={shape1}
                                                            />
                                                            <i className="icon-book-open" />

                                                            {/* <button onClick={changeColor}>变</button> */}
                                                        </div>
                                                        <div className="ms-2">
                                                            <h3 className="m-0 fw-semibold">
                                                                27
                                                            </h3>
                                                            <h6 className="m-0 fw-light">
                                                                今日活动人数
                                                            </h6>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div className="col-4">
                                                    <div className="card px-3 py-2 mb-4 d-flex flex-row align-items-center">
                                                        <div className="position-relative shape-block">
                                                            <img
                                                                alt="Bootstrap Themes"
                                                                className="img-fluid img-4x"
                                                                src={shape2}
                                                            />
                                                            <i className="icon-check-circle" />
                                                        </div>
                                                        <div className="ms-2">
                                                            <h3 className="m-0 fw-semibold">
                                                                18
                                                            </h3>
                                                            <h6 className="m-0 fw-light">
                                                                今日发布活动数
                                                            </h6>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div className="col-4">
                                                    <div className="card px-3 py-2 mb-4 d-flex flex-row align-items-center">
                                                        <div className="position-relative shape-block">
                                                            <img
                                                                alt="Bootstrap Themes"
                                                                className="img-fluid img-4x"
                                                                src={shape3}
                                                            />
                                                            <i className="icon-x-circle" />
                                                        </div>
                                                        <div className="ms-2">
                                                            <h3 className="m-0 fw-semibold">
                                                                12
                                                            </h3>
                                                            <h6 className="m-0 fw-light">
                                                                今日参加活动数
                                                            </h6>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div className="col-4">
                                                    <div className="card px-3 py-2 mb-4 d-flex flex-row align-items-center">
                                                        <div className="position-relative shape-block">
                                                            <img
                                                                alt="Bootstrap Themes"
                                                                className="img-fluid img-4x"
                                                                src={shape4}
                                                            />
                                                            <i className="icon-add_task" />
                                                        </div>
                                                        <div className="ms-2">
                                                            <h3 className="m-0 fw-semibold">
                                                                3
                                                            </h3>
                                                            <h6 className="m-0 fw-light">
                                                                活动材料上传数
                                                            </h6>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div className="col-4">
                                                    <div className="card px-3 py-2 mb-4 d-flex flex-row align-items-center">
                                                        <div className="position-relative shape-block">
                                                            <img
                                                                alt="Bootstrap Themes"
                                                                className="img-fluid img-4x"
                                                                src={shape5}
                                                            />
                                                            <i className="icon-alert-triangle" />
                                                        </div>
                                                        <div className="ms-2">
                                                            <h3 className="m-0 fw-semibold">
                                                                5
                                                            </h3>
                                                            <h6 className="m-0 fw-light">
                                                                材料上链数
                                                            </h6>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div className="col-4">
                                                    <div className="card px-3 py-2 mb-4 d-flex flex-row align-items-center">
                                                        <div className="position-relative shape-block">
                                                            <img
                                                                alt="Bootstrap Themes"
                                                                className="img-fluid img-4x"
                                                                src={shape6}
                                                            />
                                                            <i className="icon-access_time" />
                                                        </div>
                                                        <div className="ms-2">
                                                            <h3 className="m-0 fw-semibold">
                                                                7
                                                            </h3>
                                                            <h6 className="m-0 fw-light">
                                                                用户个数
                                                            </h6>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div className="col-12">
                                                    <div className="card mb-4">
                                                        <div className="card-header">
                                                            <h5 className="card-title">
                                                                Avg. Response Time
                                                            </h5>
                                                        </div>
                                                        <div className="card-body">
                                                            <ApexCharts options={options} series={options.series} type="area" height={202} />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="row">
                                        <div className="col-xl-4 col-md-6 col-sm-12 col-12">
                                            <div className="card mb-4">
                                                <div className="card-header">
                                                    <h5 className="card-title">
                                                        Live Calls
                                                    </h5>
                                                </div>
                                                <div className="card-body">
                                                    <div ref={chartRef3} id="liveCallsData" />
                                                    <div className="d-flex justify-content-center gap-4 my-4">
                                                        <div className="d-flex align-items-center">
                                                            <i className="icon-phone-incoming fs-3 me-3" />
                                                            {' '}Incoming
                                                            <span className="badge rounded-pill bg-info ms-2">
                                                                15
                                                            </span>
                                                        </div>
                                                        <div className="d-flex align-items-center">
                                                            <i className="icon-phone-outgoing fs-3 me-3" />
                                                            {' '}Outgoing
                                                            <span className="badge rounded-pill bg-dark ms-2">
                                                                18
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="col-xl-4 col-md-6 col-sm-12 col-12">
                                            <div className="card mb-4">
                                                <div className="card-header">
                                                    <h5 className="card-title">
                                                        Agents Online
                                                    </h5>
                                                </div>
                                                <div className="card-body">
                                                    <div ref={chartRef4} id="agentsLiveData" />
                                                    <div className="d-flex justify-content-center gap-4 my-4">
                                                        <div className="d-flex align-items-center">
                                                            Busy
                                                            <span className="badge rounded-pill bg-info ms-2">
                                                                15
                                                            </span>
                                                        </div>
                                                        <div className="d-flex align-items-center">
                                                            Online
                                                            <span className="badge rounded-pill bg-dark ms-2">
                                                                18
                                                            </span>
                                                        </div>
                                                        <div className="d-flex align-items-center">
                                                            Offline
                                                            <span className="badge rounded-pill bg-white text-black ms-2">
                                                                13
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="col-xl-4 col-md-12 col-sm-12 col-12">
                                            <div className="card mb-4">
                                                <div className="card-header">
                                                    <h5 className="card-title">
                                                        Tickets by Priority
                                                    </h5>
                                                </div>
                                                <div className="card-body">
                                                    <div ref={chartRef5} id="lticketsPriorityData" />
                                                    <div className="d-flex justify-content-center gap-4 my-4">
                                                        <div className="d-flex align-items-center">
                                                            High
                                                            <span className="badge rounded-pill bg-info ms-2">
                                                                15
                                                            </span>
                                                        </div>
                                                        <div className="d-flex align-items-center">
                                                            Medium
                                                            <span className="badge rounded-pill bg-dark ms-2">
                                                                18
                                                            </span>
                                                        </div>
                                                        <div className="d-flex align-items-center">
                                                            Low
                                                            <span className="badge rounded-pill bg-white text-black ms-2">
                                                                13
                                                            </span>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div className="row">
                                        <div className="col-xl-6 col-lg-12 col-12">
                                            <div className="card mb-4">
                                                <div className="card-header">
                                                    <h5 className="card-title">
                                                        Top 5 Agents
                                                    </h5>
                                                </div>
                                                <div className="card-body">
                                                    <div className="border rounded-3">
                                                        <div className="table-responsive">
                                                            <table className="table align-middle custom-table m-0">
                                                                <thead>
                                                                    <tr>
                                                                        <th>
                                                                            #
                                                                        </th>
                                                                        <th>
                                                                            Agent
                                                                        </th>
                                                                        <th>
                                                                            Tickets
                                                                        </th>
                                                                        <th>
                                                                            Time Spent
                                                                        </th>
                                                                        <th>
                                                                            Feedback
                                                                        </th>
                                                                    </tr>
                                                                </thead>
                                                                <tbody>
                                                                    <tr>
                                                                        <td>
                                                                            1
                                                                        </td>
                                                                        <td>
                                                                            <div className="fw-semibold">
                                                                                Elisa Shah
                                                                            </div>
                                                                        </td>
                                                                        <td>
                                                                            <span className="badge bg-info">
                                                                                54
                                                                            </span>
                                                                        </td>
                                                                        <td>
                                                                            <span className="badge border border-info text-info">
                                                                                2 Hrs 30 Mins
                                                                            </span>
                                                                        </td>
                                                                        <td>
                                                                            <div className="starReadOnly1 rating-stars my-2" />
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>
                                                                            2
                                                                        </td>
                                                                        <td>
                                                                            <div className="fw-semibold">
                                                                                Ladonna Jones
                                                                            </div>
                                                                        </td>
                                                                        <td>
                                                                            <span className="badge bg-success">
                                                                                49
                                                                            </span>
                                                                        </td>
                                                                        <td>
                                                                            <span className="badge border border-success text-success">
                                                                                2 Hrs 21 Mins
                                                                            </span>
                                                                        </td>
                                                                        <td>
                                                                            <div className="starReadOnly2 rating-stars my-2" />
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>
                                                                            3
                                                                        </td>
                                                                        <td>
                                                                            <div className="fw-semibold">
                                                                                Jewel Alexander
                                                                            </div>
                                                                        </td>
                                                                        <td>
                                                                            <span className="badge bg-warning">
                                                                                45
                                                                            </span>
                                                                        </td>
                                                                        <td>
                                                                            <span className="badge border border-warning text-warning">
                                                                                2 Hrs 15 Mins
                                                                            </span>
                                                                        </td>
                                                                        <td>
                                                                            <div className="starReadOnly1 rating-stars my-2" />
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>
                                                                            4
                                                                        </td>
                                                                        <td>
                                                                            <div className="fw-semibold">
                                                                                Rich Spears
                                                                            </div>
                                                                        </td>
                                                                        <td>
                                                                            <span className="badge bg-danger">
                                                                                42
                                                                            </span>
                                                                        </td>
                                                                        <td>
                                                                            <span className="badge border border-danger text-danger">
                                                                                2 Hrs 10 Mins
                                                                            </span>
                                                                        </td>
                                                                        <td>
                                                                            <div className="starReadOnly1 rating-stars my-2" />
                                                                        </td>
                                                                    </tr>
                                                                    <tr>
                                                                        <td>
                                                                            5
                                                                        </td>
                                                                        <td>
                                                                            <div className="fw-semibold">
                                                                                Shelly Daniel
                                                                            </div>
                                                                        </td>
                                                                        <td>
                                                                            <span className="badge bg-secondary">
                                                                                38
                                                                            </span>
                                                                        </td>
                                                                        <td>
                                                                            <span className="badge border border-secondary text-secondary">
                                                                                2Hrs 05Mins
                                                                            </span>
                                                                        </td>
                                                                        <td>
                                                                            <div className="starReadOnly1 rating-stars my-2" />
                                                                        </td>
                                                                    </tr>
                                                                </tbody>
                                                            </table>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="col-xl-3 col-lg-6 col-12">
                                            <div className="card mb-4">
                                                <div className="card-header">
                                                    <h5 className="card-title">
                                                        Feedback
                                                    </h5>
                                                </div>
                                                <div className="card-body">
                                                    <div className="scroll300">
                                                        <div className="my-2">
                                                            <div className="d-flex align-items-start">
                                                                <div className="media-box me-3 bg-primary rounded-5">
                                                                    <i className="icon-thumbs-up" />
                                                                </div>
                                                                <div className="mb-4">
                                                                    <h5>
                                                                        Christian Ochoa
                                                                    </h5>
                                                                    <p className="mb-1">
                                                                        Amazing
                                                                    </p>
                                                                    <p className="m-0 opacity-50">
                                                                        3 mins ago
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <div className="d-flex align-items-start">
                                                                <div className="media-box me-3 bg-primary rounded-5">
                                                                    <i className="icon-thumbs-up" />
                                                                </div>
                                                                <div className="mb-4">
                                                                    <h5>
                                                                        Marci Aguirre
                                                                    </h5>
                                                                    <p className="mb-1">
                                                                        Great as always. All sorted with in a short																time.
                                                                    </p>
                                                                    <p className="m-0 opacity-50">
                                                                        5 mins ago
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <div className="d-flex align-items-start">
                                                                <div className="media-box me-3 bg-primary rounded-5">
                                                                    <i className="icon-thumbs-up" />
                                                                </div>
                                                                <div className="mb-4">
                                                                    <h5>
                                                                        Rico Barry
                                                                    </h5>
                                                                    <p className="mb-1">
                                                                        All sorted with in a short time.
                                                                    </p>
                                                                    <p className="m-0 opacity-50">
                                                                        5 mins ago
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <div className="d-flex align-items-start">
                                                                <div className="media-box me-3 bg-primary rounded-5">
                                                                    <i className="icon-thumbs-up" />
                                                                </div>
                                                                <div className="mb-4">
                                                                    <h5>
                                                                        Dawn Shepherd
                                                                    </h5>
                                                                    <p className="mb-1">
                                                                        Great support guys
                                                                    </p>
                                                                    <p className="m-0 opacity-50">
                                                                        6 mins ago
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <div className="d-flex align-items-start">
                                                                <div className="media-box me-3 bg-danger rounded-5">
                                                                    <i className="icon-thumbs-down" />
                                                                </div>
                                                                <div className="mb-4">
                                                                    <h5>
                                                                        Heidi Ali
                                                                    </h5>
                                                                    <p className="mb-1">
                                                                        Sorry guys
                                                                    </p>
                                                                    <p className="m-0 opacity-50">
                                                                        6 mins ago
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <div className="d-flex align-items-start">
                                                                <div className="media-box me-3 bg-primary rounded-5">
                                                                    <i className="icon-thumbs-up" />
                                                                </div>
                                                                <div className="mb-4">
                                                                    <h5>
                                                                        Julio Olson
                                                                    </h5>
                                                                    <p className="mb-1">
                                                                        Awesome support
                                                                    </p>
                                                                    <p className="m-0 opacity-50">
                                                                        9 mins ago
                                                                    </p>
                                                                </div>
                                                            </div>
                                                            <div className="d-flex align-items-start">
                                                                <div className="media-box me-3 bg-primary rounded-5">
                                                                    <i className="icon-thumbs-up" />
                                                                </div>
                                                                <div className="mb-4">
                                                                    <h5>
                                                                        Lily Lyons
                                                                    </h5>
                                                                    <p className="mb-1">
                                                                        Thanks
                                                                    </p>
                                                                    <p className="m-0 opacity-50">
                                                                        9 mins ago
                                                                    </p>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="col-xl-3 col-lg-6 col-12">
                                            <div className="card mb-4">
                                                <div className="card-header">
                                                    <h5 className="card-title">
                                                        New Tickets vs Closed
                                                    </h5>
                                                </div>
                                                <div className="card-body">
                                                    <div ref={chartRef6} id="newClosedGraph" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div className="app-footer">
                                <span>
                                    © Bootstrap Gallery 2023
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </div>
    );

}

export default Admin;
